<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Element UI 样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css">
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Element UI 脚本文件 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入 导航栏css 不需要通过服务器请求-->
    <link rel="stylesheet" type="text/css" href="../static/css/nav.css" />
</head>
<body>
<nav>
    <img class="bj-img" src="/images/v15-thead.png">
    <div id="app" class="nav-app">
       <!-- 系统名字 -->
      <div class="system-name">
          <div> <a th:href="@{/}"> <img src="/images/icon.png" /></a> </div>
          <div>PM人事管理系统</div>
      </div>
       <!--  导航栏 -->
      <div class="navBar" >
        <el-menu  style="border: 0;" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" >

            <el-menu-item index="0"><a style="text-decoration: none;" th:href="@{/}"><i class="el-icon-s-home" style="color: white"></i>首页</a></el-menu-item>

            <el-submenu index="1">
                <template slot="title"><i class="el-icon-document"></i><span slot="title">档案管理</span></template>
                <a style="text-decoration: none;" th:href="@{/user/file}"><el-menu-item index="1-1"><i class="el-icon-user-solid"></i>员工档案</el-menu-item></a>
            </el-submenu>

            <el-submenu index="2">
                <template slot="title"><i class="el-icon-date"></i>考勤管理</template>
                <a style="text-decoration: none;" th:href="@{/attendance/file}"><el-menu-item index="2-1"><i class="el-icon-s-claim"></i>考勤记录</el-menu-item></a>
            </el-submenu>

            <el-submenu index="3">
                <template slot="title"><i class="el-icon-data-line"></i>工资管理</template>
                <a style="text-decoration: none;" th:href="@{/salary/file}"><el-menu-item index="3-1"><i class="el-icon-s-data"></i>工资查询</el-menu-item></a>
            </el-submenu>

            <el-submenu index="4" v-if="userRole1">
                <template slot="title"><i class="el-icon-setting"></i>后台管理</template>
                <a style="text-decoration: none;" th:href="@{/account/file}"><el-menu-item index="4-1"><i class="el-icon-s-custom"></i>账号管理</el-menu-item></a>
                <a style="text-decoration: none;" th:href="@{/log/file}"> <el-menu-item  index="4-2"><i class="el-icon-document"></i>日志管理</el-menu-item></a>
            </el-submenu>
        </el-menu>
      </div>

       <!--  头像 -->
      <div class="headSculpture" >
          <div v-if="activeIndex==='2-1' " style="font-size: 22px;margin-right: 15px;cursor: pointer;">
              <el-tooltip class="item" effect="dark" content="消息" placement="top">
                  <el-badge :value="messageTotal" :max="99"><i class="el-icon-message" @click="messageDreawer = true"></i></el-badge>
              </el-tooltip>
          </div>
          <div v-if="activeIndex==='2-1' " style="font-size: 22px;margin-right: 20px;cursor: pointer;">
              <el-tooltip class="item" effect="dark" content="待办" placement="top" >
                  <el-badge :value="count" :max="99"> <i class="el-icon-document" @click="drawer = true"></i> </el-badge>
              </el-tooltip>
          </div>
        <div class="head-img">
<!--            <img src="/images/naofu.png" />-->
             <span>{{userNowName}}</span>
        </div>
        <el-dropdown> <span class="el-dropdown-link"> {{userNowName}} <i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
<!--                <el-dropdown-item> <i class="el-icon-user"></i>主页 </el-dropdown-item>-->
<!--                <el-dropdown-item><i class="el-icon-setting"></i>设置</el-dropdown-item>-->
                <a style="text-decoration: none;" th:href="@{/user/login}" @click="logoutButton()">
                 <el-dropdown-item ><i class="el-icon-switch-button" ></i>退出</el-dropdown-item>
                </a>
            </el-dropdown-menu>
        </el-dropdown>
      </div>

    </div>
</nav>
</body>
</html>